import React, {Component} from 'react';
import BaseOpts from '../BaseOpts';
import './index.css';
import {InputNumber, Slider, Radio, Select, Upload, Icon, Checkbox, Tabs, Collapse, Button, Input, column} from 'antd';
import Util from '../../common/util';
import ColorPicker from '../../common/colorPicker/index';
import LinkWhere from '../../common/linkWhere/index';
import SlideInput from '../../common/SlideInput/index';
import MUploadImg from '../../common/mUploadImg/index';

const TabPane = Tabs.TabPane;
const Panel = Collapse.Panel;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const Option = Select.Option;

class MImageListOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            itemStyle: {},
            dataset: {
                imgList: []
            },
            layout: {
                column: 2 //列数
            }
        }
    };


    constructor(props) {
        super(props);

        this.state = {
            data: props.data
        };

    }

    render() {
        var _self = this;
        var {style, itemStyle = {}, textStyle = {}, imgStyle = {}, dataset, layout} = this.state.data;
        var imgList = dataset.imgList || [];
        var column = layout.column;
        var itemMarginRight = parseFloat(itemStyle.marginRight || 0);
        var itemMarginBottom = parseFloat(itemStyle.marginBottom || 0);

        return (
            <div className="optsPanel">
                <Tabs defaultActiveKey="1">
                    <TabPane tab="数据配置" key="1">
                        <div className="tabBarOpts__add">
                            <Button type="primary" size="large" onClick={_self._addImg.bind(_self)}>添加</Button>
                        </div>

                        <Collapse accordion>
                            {
                                imgList.map(function (item) {
                                    return (
                                        <Panel
                                            header={
                                                <div className="panelHeader">
                                                    <span className="panelHeader__title">{item.title}</span>
                                                    <div className="panelHeader__right">
                                                        <Icon
                                                            type="delete"
                                                            onClick={(e) => {
                                                                e.preventDefault()
                                                                e.stopPropagation()
                                                                _self._delImg(item)
                                                            }}
                                                        />
                                                    </div>
                                                </div>
                                            }
                                            key={item.uid}
                                        >
                                            <div className="tabBarOptsItem">
                                                <dl className="tabBarOptsItem__options">
                                                    <dt>标题</dt>
                                                    <dd>
                                                        <Input
                                                            defaultValue={item.title}
                                                            onInput={(e) => {
                                                                item.title = e.target.value;
                                                                _self.$dataChange('imgList', imgList, 'dataset');
                                                            }}/>
                                                    </dd>
                                                    <dt>图片</dt>
                                                    <dd>
                                                        <MUploadImg
                                                            imageUrl={item.img}
                                                            onChange={
                                                                (err, imgUrl) => {
                                                                    if (err) {
                                                                        return;
                                                                    }
                                                                    item.img = imgUrl;
                                                                    _self.$dataChange('imgList', imgList, 'dataset');
                                                                }
                                                            }
                                                        />
                                                    </dd>
                                                    <dt>连接至</dt>
                                                    <dd>
                                                        <LinkWhere
                                                            onSelected={(linkData, linkType) => {
                                                                _self._selectedLink(item, linkData, linkType)
                                                            }}
                                                            defaultLinkData={item.linkData}
                                                            defaultLinkType={item.linkType}
                                                        />
                                                    </dd>
                                                </dl>
                                            </div>
                                        </Panel>
                                    )
                                })
                            }
                        </Collapse>
                    </TabPane>
                    <TabPane tab="样式配置" key="2">
                        <Collapse bordered={false} defaultActiveKey="0">
                            <Panel header="组件设置" key="0">
                                <div className="optsPanel__item">
                                    <label className="optsPanel__item__hd">展示项</label>
                                    <div className="optsPanel__item__bd">
                                        <RadioGroup
                                            onChange={(e) => {
                                                var val = e.target.value;
                                                _self.$dataChange('visible', val, 'layout');
                                            }}
                                            defaultValue={layout.visible || 0}
                                        >
                                            <Radio value="0">都展示</Radio>
                                            <Radio value="1">图片</Radio>
                                            <Radio value="2">文字</Radio>
                                        </RadioGroup>
                                    </div>
                                </div>

                                <div className="optsPanel__item">
                                    <label className="optsPanel__item__hd">布局</label>
                                    <div className="optsPanel__item__bd">
                                        <RadioGroup
                                            onChange={(e) => {
                                                var val = e.target.value;
                                                _self.$dataChange('layout', val, 'layout');
                                            }}
                                            defaultValue={layout.layout}
                                        >
                                            <Radio value="1">布局1</Radio>
                                            <Radio value="2">布局2</Radio>
                                        </RadioGroup>
                                    </div>
                                </div>

                                <div className="optsPanel__item">
                                    <label className="optsPanel__item__hd">背景</label>
                                    <div className="optsPanel__item__bd">
                                        <ColorPicker
                                            color={style.backgroundColor || '#fff'}
                                            onChangeComplete={(color, rgba) => {
                                                this.$dataChange('backgroundColor', rgba, 'style');
                                            }}
                                        />
                                    </div>
                                </div>

                                <div className="optsPanel__item">
                                    <label className="optsPanel__item__hd">列数</label>
                                    <div className="optsPanel__item__bd">
                                        <Select
                                            defaultValue={layout.column}
                                            onChange={(val) => {
                                                _self.$dataChange('column', val, 'layout');
                                            }}
                                        >
                                            <Option value="1">1列</Option>
                                            <Option value="2">2列</Option>
                                            <Option value="3">3列</Option>
                                            <Option value="4">4列</Option>
                                            <Option value="5">5列</Option>
                                        </Select>
                                    </div>
                                </div>

                                <div className="optsPanel__item">
                                    <label className="optsPanel__item__hd">间距</label>
                                    <div className="optsPanel__item__bd">
                                        <dl className="optsPanel__itemHor">
                                            <dt>左</dt>
                                            <dd>
                                                <InputNumber
                                                    style={{width: '58px'}}
                                                    defaultValue={itemMarginRight}
                                                    onChange={(val) => {
                                                        _self.$dataChange('marginRight', val + 'px', 'itemStyle');
                                                    }}
                                                />
                                            </dd>
                                            <dt>下</dt>
                                            <dd>
                                                <InputNumber
                                                    style={{width: '58px'}}
                                                    defaultValue={itemMarginBottom}
                                                    onChange={(val) => {
                                                        _self.$dataChange('marginBottom', val + 'px', 'itemStyle');
                                                    }}
                                                />
                                            </dd>
                                        </dl>
                                    </div>
                                </div>
                            </Panel>
                            <Panel header="图片设置" key="1">
                                <div className="optsPanel__item">
                                    <label className="optsPanel__item__hd">图片背景</label>
                                    <div className="optsPanel__item__bd">
                                        <ColorPicker
                                            color={imgStyle.backgroundColor || '#fff'}
                                            onChangeComplete={(color, rgba) => {
                                                this.$dataChange('backgroundColor', rgba, 'imgStyle');
                                            }}
                                        />
                                    </div>
                                </div>

                                <div className="optsPanel__item">
                                    <label className="optsPanel__item__hd">图片高度</label>
                                    <div className="optsPanel__item__bd">
                                        <InputNumber
                                            min={0}
                                            defaultValue={parseInt(imgStyle.height || '100px')}
                                            onChange={(val) => {
                                                this.$dataChange('height', val + 'px', 'imgStyle');
                                            }}
                                            disabled={layout.isImgAuto}
                                        />
                                        <Checkbox
                                            checked={layout.isImgAuto}
                                            onChange={(e) => {
                                                this.$dataChange('isImgAuto', e.target.checked, 'layout');
                                            }}
                                        >自动高度</Checkbox>
                                    </div>
                                </div>

                                <div className="optsPanel__item">
                                    <label className="optsPanel__item__hd">图片圆角</label>
                                    <div className="optsPanel__item__bd">
                                        <SlideInput
                                            min={0}
                                            max={375}
                                            value={parseInt(imgStyle.borderRadius || '0')}
                                            onChange={(val) => {
                                                this.$dataChange('borderRadius', val + 'px', 'imgStyle');
                                            }}
                                        />
                                    </div>
                                </div>
                            </Panel>
                            <Panel header="文字设置" key="2">
                                <div className="optsPanel__item">
                                    <label className="optsPanel__item__hd">文字样式</label>
                                    <div className="optsPanel__item__bd">
                                        <div className="optsPanel__item__inputWrap">
                                            <div className="mTextOpts__styles">
                                                <div className="mTextOpts__styles__item">
                                                    <ColorPicker color={textStyle.color || '#888'}
                                                                 onChangeComplete={(color, rgba) => {
                                                                     this.$dataChange('color', rgba, 'textStyle');
                                                                 }}/>
                                                </div>
                                                <div className="mTextOpts__styles__item">
                                            <span
                                                className={['fontSytle_btn fontSytle__bold', textStyle.fontWeight ? 'fontSytle_btn_active' : ''].join(' ')}
                                                onClick={() => {
                                                    var {textStyle} = this.state.data;
                                                    this.$dataChange('fontWeight', textStyle.fontWeight == 'bold' ? '' : 'bold', 'textStyle');
                                                }}
                                            >粗体</span>
                                                    <span
                                                        className={['fontSytle_btn', textStyle.fontStyle == 'italic' ? 'fontSytle_btn_active' : ''].join(' ')}
                                                        onClick={() => {
                                                            var {textStyle} = this.state.data;
                                                            this.$dataChange('fontStyle', textStyle.fontStyle == 'italic' ? '' : 'italic', 'textStyle');
                                                        }}
                                                    >斜体</span>
                                                    <span
                                                        className={['fontSytle_btn', textStyle.textDecoration == 'underline' ? 'fontSytle_btn_active' : ''].join(' ')}
                                                        onClick={() => {
                                                            var {textStyle} = this.state.data;
                                                            this.$dataChange('textDecoration', textStyle.textDecoration == 'underline' ? 'none' : 'underline', 'textStyle');
                                                        }}
                                                    >下划线</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div className="optsPanel__item">
                                    <label className="optsPanel__item__hd">文字大小</label>
                                    <div className="optsPanel__item__bd">
                                        <div className="mTextOpts__styles__item">
                                            <InputNumber
                                                min={1}
                                                defaultValue={(textStyle.fontSize || '14').replace('px', '')}
                                                onChange={(val) => {
                                                    this.$dataChange('fontSize', val + 'px', 'textStyle');
                                                }}
                                            />
                                        </div>
                                    </div>
                                </div>

                                <div className="optsPanel__item">
                                    <label className="optsPanel__item__hd">文字位置</label>
                                    <div className="optsPanel__item__bd">
                                        <RadioGroup
                                            onChange={(e) => {
                                                this.$dataChange('textAlign', e.target.value, 'textStyle');
                                            }}
                                            defaultValue={textStyle.textAlign || 'left'}
                                        >
                                            <RadioButton value="left">居左</RadioButton>
                                            <RadioButton value="center">居中</RadioButton>
                                            <RadioButton value="right">居右</RadioButton>
                                        </RadioGroup>
                                    </div>
                                </div>

                                <div className="optsPanel__item">
                                    <label className="optsPanel__item__hd">文字边距</label>
                                    <div className="optsPanel__item__bd">
                                        <SlideInput
                                            step={1}
                                            min={1}
                                            max={100}
                                            value={parseInt((textStyle.paddingLeft || '0').replace('px', ''))}
                                            onChange={(val) => {
                                                this.$dataChange('paddingLeft', val + 'px', 'textStyle');
                                                {/*this._dataChange('paddingRight', val + 'px', 'textStyle');*/
                                                }
                                            }}
                                        />
                                    </div>
                                </div>

                                <div className="optsPanel__item">
                                    <label className="optsPanel__item__hd">文字行高</label>
                                    <div className="optsPanel__item__bd">
                                        <SlideInput
                                            step={1}
                                            min={1}
                                            max={100}
                                            value={parseInt((textStyle.lineHeight || '0').replace('px', ''))}
                                            onChange={(val) => {
                                                this.$dataChange('lineHeight', val + 'px', 'textStyle');
                                            }}
                                        />
                                    </div>
                                </div>
                            </Panel>
                        </Collapse>
                    </TabPane>
                </Tabs>
            </div>
        );
    }

    componentDidMount() {
        var imgList = this.state.data.dataset.imgList || [];

        if (imgList.length == 0) {
            imgList = imgList.concat([
                {
                    uid: Util.getUId(),
                    title: '标题',
                    img: '',
                    linkType: '',
                    linkData: ''
                },
                {
                    uid: Util.getUId(),
                    title: '标题',
                    img: '',
                    linkType: '',
                    linkData: ''
                }
            ]);
            this.$dataChange('imgList', imgList);
        }
    }

    _addImg() {
        var imgList = this.state.data.dataset.imgList || [];

        imgList.push({
            uid: Util.getUId(),
            title: '标题',
            img: '',
            linkType: '',
            linkData: ''
        });
        this.$dataChange('imgList', imgList);
    }

    _delImg(item) {
        var imgList = this.state.data.dataset.imgList || [];

        imgList.some(function (obj, index) {
            if (obj.uid == item.uid) {
                imgList.splice(index, 1);
                return true;
            }
        });
        this.$dataChange('imgList', imgList);
    }

    _selectedLink(item, linkData, linkType) {
        var imgList = this.state.data.dataset.imgList || [];

        item['linkData'] = linkData;
        item['linkType'] = linkType;

        this.$dataChange('imgList', imgList);
    }
}

export default MImageListOpts;
